import React from "react";
import './index.scss'
import { useNavigate } from "react-router-dom";

interface hotType {
    children: {
        id:string,
        url:string,
        text:string,
        title:string,
        tag:string[]
    }
  }

const ArticleCard:React.FC<hotType> = ({children})=> {
    const navigate = useNavigate()
    const handleClick = ()=> {
        navigate(`/article/${children.id}`)
    }
    return(
        <div className="card" >
            <img src={children.url} alt="" onClick={handleClick}/>
            <div className="contentText">
                <h4 onClick={handleClick}>{children.title}</h4>
                <p>{children.text}
                </p>
                <div>
                    {children.tag.map(item=> {
                        return(
                            <span key={item}>{item}</span>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}
export default ArticleCard